// JavaScript Document
	
	$(document).ready(function(){
							   		init();
									plaatsPointers();  
									  });


	var map = null;
	var geocoder = null;

	function init() {
		
		// Controleer op compatibiliteit
     	if (GBrowserIsCompatible()) {
		// Zet de map naar Antwerpen door de ingevoerde coordinaten
		var mapcenter = new GLatLng(51.219167, 4.401580);
		
		// Plaats Google Maps in map_canvas
		map = new GMap2(document.getElementById("map_canvas"));
		geocoder = new GClientGeocoder();
		
		// Zet de marker naar In A Buurt icon (iabIcon)
        	var iabIcon = new GIcon(G_DEFAULT_ICON);
        	iabIcon.image = "/public/images/map_arrow.png";
		markerCustom = { icon:iabIcon };

		// Voeg knopjes toe aan de map		
		map.setUIToDefault();
		map.addControl(new GMapTypeControl());
		
		// Centreer de map. Cijfer 15 is de zoomlevel
		map.setCenter(mapcenter, 12);
		}
	}
	
	function plaatsPointers() {					
      // Lees coordinaten van data.xml
      	var request = GXmlHttp.create();
     	request.open("GET", "/bewonersgroepen/xmlKaart/", true);
      	request.onreadystatechange = function() {
      		if (request.readyState == 4) {
          		var xmlDoc = GXml.parse(request.responseText);
          		var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          		for (var i = 0; i < markers.length; i++) {
					// Lees de coordinaten van XML bestand.
            			var lat = parseFloat(markers[i].getAttribute("lat"));
            			var lng = parseFloat(markers[i].getAttribute("lng"));
            			var point = new GLatLng(lat,lng);
					// Hier wordt de velden ingeladen van XML bestand.
					var img = markers[i].getAttribute("img");
					var tit = markers[i].getAttribute("title");
            			var txt = markers[i].getAttribute("text");
					var lnk = markers[i].getAttribute("web");
		  
            			// Plaats de punten op de map en de velden
            			var marker = createMarker(point,img,tit,txt,lnk);
            			map.addOverlay(marker);
          		}
			}
		}
		request.send(null);
	}
	
	function createMarker(point,img,tit,txt,lnk) {
		var punt = new GMarker(point, markerCustom);
			GEvent.addListener(punt, "click", function() {
			// Hier wordt de afmeting van foto ingesteld
			var image = new Image();
			image.src = img;
			
			
			var foto = '<img src=\"' + img + '\"/>';
			// Hier wordt de titel in H1 gezet
			var naam =  '<h2>' + tit  + '</h2>';
			// Hier wordt de tekst in paragraaf gezet
		
			// Hier wordt de link geplaatst
			var website = '<a href=\"' + lnk + '\">Profiel.</a>';
			image.onload = function(){
			punt.openInfoWindow(foto + naam + website);
			}
			})
	return punt;
	}
